import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

class GestureDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _GestureDemoState();
  }
}

class _GestureDemoState extends State {

  //保存事件名
  var _operation = "没有识别到手势!";

  var _top = 0.0; //距顶部的偏移
  var _left = 0.0; //距左边的偏移

  var _width = 200.0; //通过修改图片宽度来达到缩放效果

  var _tapGestureRecognizer = TapGestureRecognizer();
  var _toggle = false; //变色开关

  @override
  void dispose() {
    //用到GestureRecognizer的话一定要调用其dispose方法释放资源
    _tapGestureRecognizer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('手势的例子'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            // 点击、双击、长按
            Padding(
              padding: EdgeInsets.all(10),
              child: GestureDetector(
                child: Container(
                  alignment: Alignment.center,
                  width: 200,
                  height: 100,
                  color: Colors.blue,
                  child: Text(_operation),
                ),
                onTap: () {
                  setState(() {
                    _operation = '单击';
                  });
                },
                onDoubleTap: () {
                  setState(() {
                    _operation = '双击';
                  });
                },
                onLongPress: () {
                  setState(() {
                    _operation = '长按';
                  });
                },
              ),
            ),

            // 拖动、滑动
            Padding(
              padding: EdgeInsets.all(10),
              child: Container(
                alignment: Alignment.center,
                width: 200,
                height: 100,
                color: Colors.red,
                child: Stack(
                  children: <Widget>[
                    Positioned(
                      top: _top,
                      left: _left,
                      child: GestureDetector(
                        child: CircleAvatar(child: Text("A")),
                        //手指按下时会触发此回调
                        onPanDown: (DragDownDetails e) {
                          //打印手指按下的位置(相对于容器)
                          print("用户手指按下：${e.localPosition}");
                        },
                        //手指滑动时会触发此回调
                        onPanUpdate: (DragUpdateDetails e) {
                          //用户手指滑动时，更新偏移，重新构建
                          setState(() {
                            _left += e.delta.dx;
                            if(_left > 180 || _left < 0) {
                              _left = 0;
                            }
                            _top += e.delta.dy;
                            if (_top > 80 || _top < 0) {
                              _top = 0;
                            }
                          });
                        },
                        onPanEnd: (DragEndDetails e){
                          //打印滑动结束时在x、y轴上的速度
                          print(e.velocity);
                        },
                      ),
                    )
                  ],
                ),
              ),
            ),

            // 缩放
            Padding(
              padding: EdgeInsets.all(10),
              child: GestureDetector(
                // 指定宽度，高度自适应
                child: Image.asset('images/icon-40.png', width: _width, fit: BoxFit.fill),
                onScaleUpdate: (ScaleUpdateDetails details) {
                  setState(() {
                    // 缩放倍数在0.8到10倍之间
                    _width= 200 * details.scale.clamp(0.3, 10.0);
                  });
                },
              ),
            ),

            // GestureRecognizer
            Padding(
              padding: EdgeInsets.all(10),
              child: Text.rich(TextSpan(
                children: [
                  TextSpan(text: '你好，世界'),
                  TextSpan(
                    text: '点我变色',
                    style: TextStyle(
                      fontSize: 30,
                      color: _toggle ? Colors.red : Colors.blue,
                    ),
                    recognizer: _tapGestureRecognizer
                      ..onTap = () {
                        setState(() {
                          _toggle = !_toggle;
                        });
                      },
                  ),
                  TextSpan(text: '你好，世界'),
                ],
              )),
            ),
          ],
        ),
      ),
    );
  }
}